<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表信息填写</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px 97px;
        }
        th,td {
            border: 1px solid gray;
            padding: 5px 0;
            width: 100px;
            text-align: center;
        }
        th {
            background-color: cadetblue;
        }
        form {
            width: 629px;
            margin: 0 97px;
        }
        .box {
            width: 800px;
            margin: auto;
        }
        h3 {
            text-align: center;
        }
        input {
            width: 90px;
            height: 20px;
        }
        select {
            width: 96px;
            height: 26px;
        }
        button {
            width: 96px;
            height: 26px;
        }
        td a {
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="box">
    <h3>信息录入</h3>
    <form>
        <input type="text" placeholder="姓名" name="name" class="name" autocomplete="off">
        <input type="text" placeholder="年龄" name="age" class="age" autocomplete="off">
        <input type="text" placeholder="薪资" name="salary" class="salary" autocomplete="off">
        <select name="sex" class="sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="安徽">安徽</option>
            <option value="苏州">苏州</option>
        </select>
        <button>添加</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪资</th>
                <th>性别</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script>
    // 首先是拿到form数据table中去
    const form = document.querySelector("form")
    const name = document.querySelector(".name")
    const age = document.querySelector(".age")
    const salary = document.querySelector(".salary")
    const sex = document.querySelector(".sex")
    const city = document.querySelector(".city")
    const tbody =  document.querySelector("tbody")
    const items = document.querySelectorAll("[name]")
    const data = JSON.parse(localStorage.getItem("data")) || []
    // 拿数据渲染表单
    render()
    form.addEventListener("submit",function (e) {
        e.preventDefault()
        // 思路是什么，拿数据，渲染数据
        for (let i=0;i<items.length;i++){
            if(items[i].value === ""){
                return alert("输入不能为空")
            }
        }
        data.push({
            name: name.value,
            age: age.value,
            salary: salary.value,
            sex: sex.value,
            city: city.value,
        })
        localStorage.setItem("data",JSON.stringify(data))
        tbody.innerHTML = ''
        form.reset()
        render()
    })
    // 点击删除，事件绑定
    tbody.addEventListener("click",function (e) {
        if (e.target.tagName === "A"){
            data.splice(e.target.dataset.id,1)
            localStorage.setItem("data",JSON.stringify(data))
            tbody.innerHTML = ''
            render()
        }
    })
    function render(){
        for (let i=0;i<data.length;i++){
            const tr = document.createElement("tr")
            tr.innerHTML = `
            <td>${data[i].name}</td>
            <td>${data[i].age}</td>
            <td>${data[i].salary}</td>
            <td>${data[i].sex}</td>
            <td>${data[i].city}</td>
            <td><a href="#" data-id="${i}">删除</a></td>
        `
            tbody.appendChild(tr)
        }
    }
</script>
</body>
</html>